import React from "react";

let gl;
const canvasSize = Math.min(window.innerHeight, window.innerWidth);
// 棋盘分段数 20*20
const boardSegment = 20;
// 棋盘顶点数量，使用`gl.LINES`绘制棋盘格子的话。横纵各需21条线，每条线2个顶点共需21x4个顶点。
const boardVertexNumber = (boardSegment + 1) * 4;
// 棋盘顶点坐标
const boardVertex = [];
// 每个棋子顶点数量（分段数量），先设为1用一个点表示，之后渲染成圆形棋子的时候会分段成多个顶点
const chessSegment = 1;
// 最大棋子数
let maxChess = (boardSegment + 1)*  2;
// 最大顶点数，棋盘顶点+棋子顶点
const maxPoints = boardVertexNumber + maxChess * chessSegment;
// 顶点着色器Uniforms全局变量vColor的位置
let colorLoc;

function initBoard() {
    const rowLineNumber = boardSegment + 1;
    const columnLineNumber = boardSegment + 1;
    const rowHeight = 2 / boardSegment;
    const columnWidth = 2 / boardSegment;
    for (let i = 0; i < rowLineNumber + columnLineNumber; i++) {
      if (i < rowLineNumber) {
        boardVertex.push(
          vec2(-1.0, -1 + i * rowHeight),
          vec2(1.0, -1 + i * rowHeight),
        );
      } else {
        boardVertex.push(
          vec2(-1 + (i % rowLineNumber) * columnWidth, -1),
          vec2(-1 + (i % rowLineNumber) * columnWidth, 1),
        );
      }
    }
  }
  // https://juejin.cn/post/6844904127575621645
  //连5子
  class FivePi extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          count: 0,
        };
      }
      componentDidMount() {
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)
     }
     render() {
        const style = {
          border: "1px solid red",
        };
        return (
          <div>
             <canvas id="gl-canvas" 
            style={style}
             width='1024' height='768'></canvas>
          </div>
        );
      }
  }
  export default FivePi